@import '../../../app/mixins.css';

.fieldGroup {
  display: flex;
  flex-direction: column;

  & .fieldLabel {
    @mixin contentNormal bold;

    color: var(--color-maastricht-blue);
    margin: 16px 0 8px;
    text-align: initial;
  }

  & .fieldHolder {
    align-items: center;
    display: flex;
    position: relative;
    width: 100%;

    & .status {
      color: var(--color-ultramarine-blue);
      opacity: 0;
      position: absolute;
      right: 10px;
      transition: opacity var(--animation-speed-fast) linear;

      &.show {
        opacity: 1;
        transition: opacity var(--animation-speed-fast) linear var(--animation-delay-standard);
      }
    }
  }

  & .fieldRow {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;

    & > .separator {
      background-color: var(--color-platinum);
      display: block;
      flex-shrink: 0;
      height: 1px;
      margin: 0 15px;
      width: 10px;
    }

    & textarea {
      min-height: 32px;
      overflow: hidden;
    }
  }

  & .input {
    resize: none;

    &:focus {
      & + .byteCounter {
        opacity: 1;

        & ~ .status {
          opacity: 0;
        }
      }
    }
  }
}

.dropdownWrapper {
  position: relative;
  width: 100%;

  & .calendarDropdown {
    padding: 16px;
    right: calc(100% + 15px);
    top: -110px;
    transform-origin: calc(100% + 9px) 50%;
    width: auto;

    & :global(.dropdown-arrow) {
      top: calc(50% - 18px);
    }
  }
}
